<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <meta name="referrer" content="never">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin-top: 10px;
        }

        h2 {
            margin-left: 10px;
        }

        ul,
        li {
            list-style: none;
        }

        .myheader {
            margin-left: 10px;
            color: #191919;
            font-weight: 700;
        }

        .mybox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 10px;
            margin-bottom: 20px;
            /* height: 150px; */
            /* overflow: hidden; */
        }

        .mybox li {
            position: relative;
            width: 115px;
            margin-bottom: 10px;
        }

        .myImg {
            width: 115px;
            height: 160px;
        }

        .mybox .mytitle {
            font-size: 13px;
            font-weight: 700;
            line-height: 23px;
            color: #191919;
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .aa {
            position: absolute;
            top: 0;
            left: 0;
            width: 26px;
            height: 26px;
            background-color: rgba(0, 0, 0, 0.3);
            background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20stroke%3D%22%23fff%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.084%2019.395a26.45%2026.45%200%2001-.87.577c-.626.4-1.415.4-2.042.002-1.695-1.079-5.091-3.513-6.963-6.728-1.51-2.595-1.738-5.797.075-7.68%201.813-1.88%204.815-1.856%206.702.005.468.462.79.893%201.206%201.429.415-.536.738-.967%201.206-1.429%201.887-1.86%204.89-1.885%206.702-.004.692.718%201.087%201.63%201.226%202.626%22%20stroke-width%3D%221.75%22%2F%3E%3Cpath%20stroke-width%3D%221.85%22%20d%3D%22M22.192%2015.5h-7%203.5zM18.692%2019v-7%203.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
            background-position: center;
            background-repeat: no-repeat;
            background-size: 20px;
            border-radius: 6px 0 6px 0;
        }

        .bb {
            display: inline-block;
            width: 13px;
            height: 13px;
            background: no-repeat url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%201%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%23DF1010%22%20stroke-width%3D%221.5%22%20x%3D%221.25%22%20y%3D%221.25%22%20width%3D%2219.5%22%20height%3D%2219.5%22%20rx%3D%229.75%22%2F%3E%3Cpath%20d%3D%22M8%2013.842V8.167a1.25%201.25%200%20011.913-1.06l4.53%202.834a1.25%201.25%200%20010%202.12L9.914%2014.9A1.25%201.25%200%20018%2013.84z%22%20fill%3D%22%23DF1010%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) center/contain;
            vertical-align: center;
        }


        .rating-stars.s,
        .rating-stars.small {
            height: 10px;
            line-height: 10px;
        }

        .rating-stars {
            display: inline-block;
            vertical-align: top;
        }

        .rating-stars-item.s,
        .rating-stars-item.small {
            width: 10px;
            height: 10px;
        }

        .rating-stars-item.rating-stars-item-full {
            background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.486.54l1.003%202.564a.313.313%200%2000.272.198l2.748.162a.521.521%200%2001.3.924L7.681%206.133a.313.313%200%2000-.104.321l.695%202.664a.521.521%200%2001-.785.57L5.169%208.205a.313.313%200%2000-.338%200L2.513%209.69a.521.521%200%2001-.785-.57l.695-2.665a.313.313%200%2000-.104-.32L.19%204.387a.521.521%200%2001.3-.924l2.748-.162a.313.313%200%2000.272-.198L4.514.54a.521.521%200%2001.972%200z%22%20fill%3D%22%23f90%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E);
        }

        .rating-stars-item.rating-stars-item-half {
            background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2210%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5.002%208.155a.313.313%200%2000-.17.05L2.512%209.688a.521.521%200%2001-.785-.57l.695-2.665a.313.313%200%2000-.104-.32L.19%204.387a.521.521%200%2001.3-.924l2.748-.162a.313.313%200%2000.272-.198L4.514.54A.522.522%200%20015.001.21v7.946z%22%20fill%3D%22%23F90%22%2F%3E%3Cpath%20d%3D%22M5.001.209a.52.52%200%2001.485.331l1.003%202.564a.313.313%200%2000.272.198l2.748.162a.521.521%200%2001.3.924L7.681%206.133a.313.313%200%2000-.104.321l.695%202.664a.521.521%200%2001-.785.57L5.169%208.205a.313.313%200%2000-.167-.049V.21z%22%20fill-opacity%3D%22.12%22%20fill%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
        }

        .rating-stars-item {
            display: inline-block;
        }

        .mypf {
            font-size: 13px;
            line-height: 13px;
            margin-left: 3px;
            color: #f90;
            font-weight: 500;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h2>分类浏览</h2>
        <film :mydata="xuanyi">
            悬疑片>
        </film>
        <film :mydata="xiju">
            喜剧片>
        </film>
    </div>

    <script type="template" id="filmcon">
        <div class="box">
            <p class="myheader"><slot></slot></p>
            <div>
                <ul class="mybox">
                    <li v-for="item in mydata">
                        <img class="myImg" :src="item.cover.url"/>
                        <span class="aa"></span>
                        <div class="mytitle">
                            <span class="bb"></span>
                            {{item.title}}
                        </div>
                        <div>
                            <!-- <span class="rating-stars undefined-stars small" :data-rating="item.rating.star_count">
                                <span class="rating-stars-item rating-stars-item-full small"></span>
                                <span class="rating-stars-item rating-stars-item-full small"></span>
                                <span class="rating-stars-item rating-stars-item-full small"></span>
                                <span class="rating-stars-item rating-stars-item-full small"></span>
                                <span class="rating-stars-item rating-stars-item-half small"></span>
                            </span> -->
                            <span class="mypf">{{item.rating.value}}</span>
                        </div>
                    </li>
                </ul>
            </div> 
        </div>

    </script>
    <script src='./js/vue.js'></script>
    <script src="./js/axios.js"></script>
    <script>

        //film  子组件
        var film = {
            props: ["mydata"],
            template: "#filmcon"
        }



        var vm = new Vue({
            el: '#app',
            data: {
                xuanyi: [],
                xiju: []
            },
            components: {
                film
            },
            created() {
                axios.get("./json/douban.json").then(vel => {
                    console.log(vel.data[0].items);
                    this.xuanyi = vel.data[0].items;
                    this.xiju = vel.data[1].items;
                });
            }
        });
    </script>
</body>

</html>